﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>

    <div style="position:absolute;top:0;left:0;background-color: white; padding: 15px 10px 10px 15px; ">
        <input type="range" id="opacity" name="opacity"
               value="1.0" min="0.0" max="1.0" step="0.01"/>
    </div>

    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { LayerSwitcher } from '../../src/og/control/LayerSwitcher.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { LonLat } from '../../src/og/LonLat.js';


        document.getElementById("opacity").addEventListener("input", function (e) {
        osm.opacity = this.value
        });

        var osm = new XYZ("OpenStreetMap", {
        isBaseLayer: false,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var sat = new XYZ("MapQuest Satellite", {
        isBaseLayer: false,
        url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        attribution: `2014 MapQuest - Portions 2014 "Map data
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });


        var globus = new Globe({
        "target": "globus",
        "name": "Earth",
        "terrain": new GlobusTerrain(),
        "layers": [sat, osm]
        });

        globus.planet.addControl(new LayerSwitcher());

        globus.planet.viewLonLat(new LonLat(39.59, 45.22, 25595));

        window.LonLat = LonLat;
        window.planet = globus.planet;

    </script>
</body>

</html>